<template>
  <el-dialog title="编辑用户" :visible="dialogVisible" @close="handleClose">
    <!-- 表单 -->
    <el-form ref="adduser" label-width="120px" :model="formData" :rules="rules"
     >
      <el-form-item label="用户名" prop="username" >
        <el-input style="width:80%" placeholder="录入管理员" v-model="formData.username" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email" >
        <el-input style="width:80%" placeholder="请输入邮箱" v-model="formData.email" />
      </el-form-item>
      <el-form-item label="密码" prop="password" >
        <el-input style="width:80%" placeholder="请输入密码" v-model="formData.password" />
      </el-form-item>
      <el-form-item label="角色" prop="role" >
        <el-input style="width:80%" placeholder="请输入角色" v-model="formData.role"  />
      </el-form-item>
      <el-form-item label="权限组名称" prop="permission_group_title">
        <el-select style="width:80%" placeholder="请选择" v-model="formData.permission_group_title" >
          <el-option v-for="item in permission" :key="item.id"
          :label="item.title"
          :value="item.title"
          v-loading="loading"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone" >
        <el-input style="width:80%" placeholder="请输入联系电话" v-model="formData.phone" />
      </el-form-item>
      <el-form-item label="介绍" prop="introduction" >
        <el-input style="width:80%" placeholder="请输入..." v-model="formData.introduction" />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="handleClose" >取消</el-button>
          <el-button type="primary" size="small" @click="btnOK" >确定</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>
<script>
import { simple } from '@/api/base/permissions'
import { add } from '@/api/base/users'
export default {
  name: 'Tools',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formData: {
        username: '',
        email: '',
        password: 123456,
        role: '',
        permission_group_title: '',
        phone: '',
        introduction: ''
      },
      rules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]

      },
      permission: [],
      loading: false
    }
  },
  created () {
    this.simpleData()
  },
  methods: {
    // 取消的时候 一般会做3件事
    // 1. 表单校验结果的重置
    // 2. formData 数组的重置
    // 3. 改变父组件的值
    handleClose () {
      this.formData = {
        username: '',
        email: '',
        password: '',
        role: '',
        permission_group_title: '',
        phone: '',
        introduction: ''
      }
      this.$refs.adduser.resetFields()
      this.$emit('update:dialogVisible', false)
    },
    async simpleData () {
      try {
        this.loading = true
        const res = await simple()
        // console.log(res)
        this.permission = res.data
      } finally {
        this.loading = false
      }
    },
    // 点击确定时校验整个表单
    async btnOK () {
      try {
        // 校验表单
        await this.$refs.adduser.validate()
        // 调用新接口
        await add(this.formData)
        this.$message.success('新增成功')
        // 告诉父组件更新数据
        this.$parent.tableList()
        this.handleClose()
      } catch (error) {
        console.log(error)
      }
    }
  }
}

</script>
<style scoped>

</style>
